"use client"

import * as React from "react"

import { Button } from "~/registry/miami/ui/button"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"

export default function DropdownMenuRadioGroupDemo() {
   const [position, setPosition] = React.useState("bottom")

   return (
      <DropdownMenu>
         <DropdownMenuTrigger asChild>
            <Button variant="outline">Open</Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuRadioGroup
               value={position}
               onValueChange={setPosition}
            >
               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
               <DropdownMenuRadioItem value="bottom">
                  Bottom
               </DropdownMenuRadioItem>
               <DropdownMenuRadioItem value="right">
                  Right
               </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
         </DropdownMenuContent>
      </DropdownMenu>
   )
}
